<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <!--  -->
      <Card
        size="large"
        :loading="loading"
        :title="item.title"
        class="w-full cursor-pointer !mt-4 md:w-1/4 !md:mt-0"
        :class="[index + 1 < 4 && '!md:mr-4']"
        :canExpan="false"
        @click="navPage(item)"
      >
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="flex justify-between px-4 py-4" style="align-items: flex-end;">
          <div class="flex items-center">
            <Icon :icon="item.icon" :size="40" class="mr-3" />
            <CountTo prefix="" :startVal="1" :endVal="item.value" class="text-2xl" />
          </div>
          <div class="flex align-bottom text-light-800">查看详细<Icon icon="ant-design:arrow-right-outlined" /></div>
        </div>

        <!-- <div class="flex justify-between p-2 px-4">
          <span>点击我</span>
          <CountTo prefix="共" :startVal="1" :endVal="item.total" />
        </div> -->
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { CountTo } from '/@/components/CountTo';
  import { Icon } from '/@/components/Icon';
  import { Tag, Card } from 'ant-design-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { storeToday } from '/@/api/sys/login';
  const loading = ref(true);
  const growCardList = ref<GrowCardItem[]>();
  const go = useGo();

  interface GrowCardItem {
    icon: string;
    title: string;
    value: number;
    total: number;
    color: string;
    action: string;
    url: string;
  }

  onMounted(() => {
    const list: GrowCardItem[] = [
      {
        title: '任务总量',
        icon: 'icons/visit-count.svg',
        value: 458,
        total: 120000,
        color: 'green',
        action: '册',
        url: '/wms/rd/rd10/rdrecord10/listDetails-bred-1',
      },
      {
        title: '上架完成',
        icon: 'icons/total-sales.svg',
        value: 203,
        total: 500000,
        color: 'blue',
        action: '册',
        url: '/wms/wh/rd01/rd01/listDetails',
      },
      {
        title: '退料任务',
        icon: 'icons/download-count.svg',
        value: 186,
        total: 120000,
        color: 'orange',
        action: '册',
        url: '/wms/rd/rd10/rdrecord10/listDetails-bred-0',
      },
      {
        title: '下架完成',
        icon: 'icons/transaction.svg',
        value: 665,
        total: 99999,
        color: 'purple',
        action: '册',
        url: '/wms/wh/rd01/rd01/listDetails',
      },
    ];
    // 此处写后端 API 获取 list 数据
    growCardList.value = list;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  });

  function navPage(item: GrowCardItem) {
    const url = item.url;
    if (!url || url === '') {
      return;
    }
    if (url.indexOf('://') != -1) {
      window.open(url);
    } else {
      if(item.title == '上架完成' || item.title == '退料任务' || item.title == '任务总量'){
        go(url + '?homePage=true');
      } else if(item.title == '下架完成'){
        go(url + '?homePage=true1');
      } else {
        go(url);
      }
    }
  }

  async function getStoreToday() {
    const res = await storeToday();
    // console.log(res);
    growCardList.value[0].value = res.storeToday;
    growCardList.value[1].value = res.warehousToday;
    growCardList.value[2].value = res.tuiliaoToday;
    growCardList.value[3].value = res.rukuToday;

  }

  getStoreToday();
</script>
